<template>
  <div class="tiyan">
    <div class="picture">
      <a data-v-507da662="" href="https://mall.ikang.com/special/110"
        ><img
          data-v-507da662=""
          data-default="https://static-newmall.health.ikang.com/img/Pic_ProductDefualt@2x.0560f5be.png"
          src="https://static-upyunmall.health.ikang.com/image/banner/20210510/76634efd83f74683803ef4a30b4d820f.jpg!/format/webp"
      /></a>
    </div>
    <div class="kong">
      <router-link
        to="/tiyan/tymoren"
        custom
        v-slot="{ href, route, navigate, isActive, isExactActive }"
      >
        <NavLink :isActive="isActive" @click.native="navigate">默认</NavLink>
      </router-link>
      <router-link
        to="/tiyan/tyxiaoliang"
        custom
        v-slot="{ href, route, navigate, isActive, isExactActive }"
      >
        <NavLink :isActive="isActive" @click.native="navigate">销量</NavLink>
      </router-link>
      <router-link
        to="/tiyan/tyjiage"
        custom
        v-slot="{ href, route, navigate, isActive, isExactActive }"
      >
        <NavLink :isActive="isActive" @click.native="navigate">价格</NavLink>
      </router-link>
      <div>
        <van-cell @click="showPopup">筛选</van-cell>
        <van-popup
          v-model="show"
          position="right"
          :style="{ height: '100%', width: '80%' }"
          overlay
          closeable
          close-icon-position="top-right"
        >
          <div class="right">
            <p>分类</p>
            <ul>
              <li class="active" v-for="todo in todos">{{ todo.text }}</li>
            </ul>
          </div>
          <div class="right">
            <p>品牌</p>
            <ul>
              <li v-for="list in lists">{{ list.text }}</li>
            </ul>
          </div>
          <div id="tc-1">
            <button class="bt">重置</button>
            <button class="bt">确认</button>
          </div>
        </van-popup>
      </div>
    </div>

    <router-view></router-view>
  </div>
</template>

<script>
import Vue from "vue";
import { Popup } from "vant";
import { cell } from "vant";
Vue.use(Popup);
Vue.use(cell);

import NavLink from "../../../components/NavLink.vue";
export default {
  components: {
    NavLink,
  },
  data() {
    return {
      show: false,
      todos: [
        { text: "入职体验" },
        { text: "君安高端" },
        { text: "VIP体验" },
        { text: "中老年体验" },
        { text: "男性/女性" },
        { text: "婚检/备孕" },
        { text: "AI慢病筛查" },
        { text: "肿瘤筛查" },
        { text: "中青年体检" },
      ],
      lists: [
        { text: "不限" },
        { text: "爱康国宾" },
        { text: "爱康君安" },
        { text: "爱康卓悦" },
      ],
    };
  },

  methods: {
    showPopup() {
      this.show = true;
    },
  },
};
</script>
<style lang='stylus'>
.tiyan {
  height: 100%;
  overflow-y: scroll;

  img {
    width: 100%;
  }
}

.picture {
  display: flex;
  justify-content: center;
  width: 3.45rem;
  height: 1.5rem;
}

.kong {
  display: flex;
  justify-content: space-around;
  height: 0.48rem;
}

.kong > div {
  height: 0.48rem;
  width: 0.94rem;
  line-height: 0.48rem;
  text-align: center;
  font-size: 16px;
}
</style>
<style lang='stylus'>
.van-cell {
  line-height: 33px;
  font-size: 16px;
}
</style>